<template>
    <div class="">
        <el-card class="box-card">
            <div class="headerBox">
              <div class="leftBox">商品类目管理</div>
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="dialogVisible = true"
                plain
                >新增一级分类</el-button
              >
            </div>
          </el-card>
          <el-card class="box-card newCard">
            <el-table
              :data="tableData"
              style="width: 100%; margin-bottom: 20px"
              row-key="id"
              height="66vh"
              header-cell-class-name="tableHeader"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
              <el-table-column prop="name" label="类目名称"> </el-table-column>
              <el-table-column prop="address" label="操作" width="150">
                <template slot-scope="scope">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="新增"
                    placement="top"
                  >
                    <i
                      v-if="scope.row.level != 2"
                      @click="editChange(scope.row)"
                      class="el-icon-circle-plus-outline"
                      style="
                        color: rgb(64, 158, 255);
                        font-size: 26px;
                        margin-right: 10px;
                        cursor: pointer;
                      "
                    ></i>
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="绑定属性"
                    placement="top"
                  >
                    <img
                      v-if="scope.row.children.length == 0"
                      src="@/assets/image/icon/details.png"
                      @click="
                        $router.push({
                          path: '/Stats',
                          query: {
                            id: scope.row.id,
                          },
                        })
                      "
                      class="iconImg"
                      alt=""
                    />
                  </el-tooltip>
  
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="编辑"
                    placement="top"
                  >
                    <img
                      src="@/assets/image/icon/edit.png"
                      @click="getEdit(scope.row)"
                      class="iconImg"
                      alt=""
                    />
                  </el-tooltip>
                  <el-popconfirm
                  v-if="scope.row.children.length == 0"
                    title="确定要删除该条分类吗？"
                    @confirm="deleteCategory(scope.row)"
                  >
                    <template slot="reference">
                      <i
                        class="el-icon-delete"
                        style="font-size: 25px; color: #409eff; cursor: pointer"
                      ></i>
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
      <el-dialog :visible.sync="dialogVisible" width="30%" class="newDialog">
        <div class="DiaLogHeader">
          <div class="titlebOX">新增</div>
          <div class="chahao" @click="dialogVisible = false">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <el-divider></el-divider>
        <div style="padding: 20px 40px">
          <el-form ref="form" :model="form" label-width="auto">
            <el-form-item label="类目名称：">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="级别：">
              <div v-if="editShow">{{ form.level }}</div>
              <el-input v-else v-model="form.level"></el-input>
            </el-form-item>
            <el-form-item label="排序：">
              <el-input v-model="form.sort"></el-input>
            </el-form-item>
            <el-form-item label="显示状态：">
              <el-switch v-model="form.showStatus"> </el-switch>
            </el-form-item>
          </el-form>
        </div>
        <div class="btnBox">
          <el-button @click="saveCategory" type="primary"> 提交</el-button>
          <el-button @click="dialogVisible = false"> 取消</el-button>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="dialogVisibleB" width="30%" class="newDialog">
        <div class="DiaLogHeader">
          <div class="titlebOX">编辑</div>
          <div class="chahao" @click="dialogVisibleB = false">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <el-divider></el-divider>
        <div style="padding: 20px 40px">
          <el-form ref="form" :model="newForm" label-width="auto">
            <el-form-item label="类目名称：">
              <el-input v-model="newForm.name"></el-input>
            </el-form-item>
            <el-form-item label="级别：">
              {{ newForm.level }}
            </el-form-item>
            <el-form-item label="排序：">
              <el-input v-model="newForm.sort"></el-input>
            </el-form-item>
            <el-form-item label="显示状态：">
              <el-switch v-model="newForm.showStatus"> </el-switch>
            </el-form-item>
          </el-form>
        </div>
        <div class="btnBox">
          <el-button @click="updateCategory" type="primary"> 提交</el-button>
          <el-button @click="dialogVisibleB = false"> 取消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import {
    selectCategory,
    saveCategory,
    updateCategory,
    deleteCategory,
    selectAttributePage,
    saveAttribute,
    updateAttribute,
    deleteAttribute 
  } from "@/api/categoryManage.js";
  export default {
    data() {
      return {
        form: {
          name: "",
          parentId: 0,
          level: 0,
          showStatus: true,
        },
        value: true,
        activeName: "first",
        dialogVisible: false,
        tableData: [],
        total: 0,
        ipageCofig: {
          keyWord: "",
          pageNumber: 1,
          pageSize: 10,
        },
        editShow: false,
        newForm: {},
        dialogVisibleC: false,
        tableDataB: [],
        params: {
          pageNumber: 1,
          pageSize: 10,
          keyword: "",
        },
        statsForm: {
          name: "",
          level: 0,
          inputList: "",
          flag: false,
          chooseMaxNum: false,
        },
        dialogVisibleB: false,
        dialogVisibleD: false,
      };
    },
    created() {
      this.selectCategory();
      this.selectAttributePage();
    },
    methods: {
      //删除属性
      deleteAttribute(row) {
        deleteAttribute({
          idList: row.id,
        }).then((data) => {
          if (data.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.dialogVisibleD = false;
            this.selectAttributePage();
          }
        });
      },
      //编辑属性
      updateAttribute() {
        if (this.statsForm.chooseMaxNum) {
          this.statsForm.chooseMaxNum = 99;
        } else {
          this.statsForm.chooseMaxNum = 1;
        }
        this.statsForm.inputList = this.statsForm.inputList.replace(/，/g, ",");
        updateAttribute(this.statsForm).then((data) => {
          if (data.code == 200) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.dialogVisibleD = false;
            this.selectAttributePage();
          }
        });
      },
      getEditData(row) {
        
        if (this.statsForm.chooseMaxNum == 99) {
          this.statsForm.chooseMaxNum = true;
        } else {
          this.statsForm.chooseMaxNum = false;
        }
        console.log(this.statsForm);
        this.dialogVisibleD = true;
        this.$forceUpdate()
      },
      //新增属性
      saveAttribute() {
        if (this.statsForm.chooseMaxNum) {
          this.statsForm.chooseMaxNum = 99;
        } else {
          this.statsForm.chooseMaxNum = 1;
        }
        this.statsForm.inputList = this.statsForm.inputList.replace(/，/g, ",");
        saveAttribute(this.statsForm).then((data) => {
          if (data.code == 200) {
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.dialogVisibleC = false;
            this.selectAttributePage();
          }
        });
      },
      //分页
      handleSizeChange(val) {
        this.params.pageSize = val;
        this.selectAttributePage();
      },
      handleCurrentChange(val) {
        this.params.pageNumber = val;
        this.selectAttributePage();
      },
      //获取全部属性
      selectAttributePage() {
        selectAttributePage(this.params).then((data) => {
          this.tableDataB = data.data.records;
          this.total = data.data.total;
        });
      },
      //删除分类
      deleteCategory(row) {
        deleteCategory({
          idList: row.id,
        }).then((data) => {
          if (data.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.selectCategory();
          }
        });
      },
      getEdit(row) {
        this.newForm = JSON.parse(JSON.stringify(row));
        if(this.newForm.showStatus==1){
          this.newForm.showStatus=true
        }else{
          this.newForm.showStatus=false
        }
        this.dialogVisibleB = true;
      },
      //编辑分类
      updateCategory() {
        let form={}
        form=JSON.parse(JSON.stringify(this.newForm))
        console.log(this.newForm.showStatus);
        if(this.newForm.showStatus){
          form.showStatus=1
        }else{
          form.showStatus=0
        }
        updateCategory(form).then((data) => {
          if (data.code == 200) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.dialogVisibleB = false;
            this.selectCategory();
          }
        });
      },
      editChange(row) {
        console.log(row);
        this.form.parentId = row.id;
        this.form.level = row.level + 1;
        this.editShow = true;
        this.dialogVisible = true;
      },
      //新增类目
      async saveCategory() {
      if(this.form.name==''){
        this.$message({
          message: '请输入类目名称',
          type: 'warning'
        });
        return false
      }
      let form={}
        form=JSON.parse(JSON.stringify(this.form))
        console.log(this.form.showStatus);
        if(this.form.showStatus){
          form.showStatus=1
        }else{
          form.showStatus=0
        }
        const data = await saveCategory(form);
        if (data.code == 200) {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.selectCategory();
        }
      },
      // 获取类目的树形结构
      async selectCategory() {
        const result = await selectCategory();
  
        if (result.code === 200) {
          const { data } = result;
          this.tableData = data;
          // this.tableData= this.recursiveChange(data)
          console.log("递归完的数据", this.tableData);
        }
      },
      // 获取所有类目属性的列表
      getCategoryAttriList() {},
      // 递归数据如果有子集则进行haschildren为true
      recursiveChange(data) {
        data.forEach((element) => {
          if (element.children.length > 0) {
            element.hasChildren = true;
            this.recursiveChange(element.children);
            this.$forceUpdate();
          }
        });
        return data;
      },
    },
    watch: {
      dialogVisible() {
        if (!this.dialogVisible) {
          this.form = {
            name: "",
            parentId: 0,
            level: 0,
            showStatus:true
          };
          this.editShow = false;
        }
      },
      dialogVisibleC() {
        if (!this.dialogVisibleC) {
          this.statsForm = {
            name: "",
            level: 0,
            inputList: "",
            flag: false,
            chooseMaxNum: false,
          };
        }
      },
      dialogVisibleD() {
        if (!this.dialogVisibleD) {
          this.statsForm = {
            name: "",
            level: 0,
            inputList: "",
            flag: false,
            chooseMaxNum: false,
          };
        }
      },
    },
  };
  </script>
  <style scoped lang="scss">
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
  
    .btnImg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
  }
  
  .DecRoot {
    padding: 20px;
    padding-left: 5px;
    padding-bottom: 0;
  
    .newCard {
      height: 75vh;
      margin-top: 20px;
    }
  
    /deep/ .el-button {
      padding: 9px 15px;
    }
  
    .el-card {
      .headerBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
  
        .leftBox {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 700;
  
          /deep/ .el-form-item {
            margin-bottom: 0;
          }
  
          /deep/ .el-input--suffix {
            width: 200px;
          }
        }
      }
  
      /deep/ .tableHeader {
        background: #edf3ff;
        font-weight: 700;
        color: #666666;
      }
  
      .iconImg {
        width: 20px;
        height: 20px;
        cursor: pointer;
        margin-right: 10px;
      }
  
      .pagination {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
  
        /deep/ .el-pagination__editor.el-input .el-input__inner {
          height: 28px !important;
        }
  
        /deep/ .el-input--mini .el-input__inner {
          height: 28px !important;
        }
      }
    }
  }
  </style>
    <style scoped lang="scss">
  .search {
    display: flex;
  }
  .newDialog {
    /deep/ .el-divider {
      margin: 0px;
    }
    /deep/ .el-dialog__header {
      padding: 0;
    }
    /deep/ .el-form-item__content {
      width: 75%;
    }
    /deep/ .el-select {
      width: 100%;
    }
    /deep/ .tableHeader {
      background: #edf3ff;
      font-weight: 700;
      color: #666666;
      padding: 5px 0;
    }
    .btnBox {
      display: flex;
      justify-content: center;
      background: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 10px 0;
      .btnImg {
        width: 14px;
        height: 14px;
        vertical-align: middle;
      }
      /deep/ .el-button {
        padding: 10px 20px;
      }
    }
    .DiaLogHeader {
      display: flex;
      padding: 10px 20px;
      justify-content: space-between;
      .titlebOX {
        font-size: 16px;
        font-weight: 700;
      }
      .chahao {
        width: 20px;
        height: 20px;
        background-image: url("@/assets/image/icon/chahao.png");
        background-size: 100% 100%;
        text-align: center;
        line-height: 20px;
        color: #e65f00;
        cursor: pointer;
      }
    }
    /deep/ .el-input {
      width: 100% !important;
    }
  }
  /deep/ .el-dialog__header {
    font-weight: 700;
  }
  /deep/ .demo-ruleForm {
    padding: 10px;
  }
  
  /deep/ .el-form-item {
    margin-bottom: 8px;
  }
  /deep/ .el-form-item__error {
    z-index: 99;
  }
  /deep/ .el-dialog__body {
    padding: 0;
    padding-top: 10px;
    padding-bottom: 60px;
  }
  .dialogTextBox {
    font-size: 14px;
    color: #000000;
  }
  </style>
  